<template>
  <div class="bgcolor">
    <!-- 头部组件放这里-->
    <home-header></home-header>
    <!-- 轮播组件 -->
    <swiper-lunbo :list="swiperlist"></swiper-lunbo>
    <!-- 旅游地点的组件 -->
    <travel-place :list="placelist"></travel-place>
    <!-- 热门榜单 -->
    <hot-list :list="hotlist"></hot-list>
    <!-- 猜你喜欢 -->
    <you-like :list="likelist"></you-like>
    <!-- 推荐去的地方 -->
    <recom-mend :list="recommendlist"></recom-mend>
  </div>
</template>

<script>
import axios from 'axios' // 直接在Home组件中，获取一次性所以数据 提高效率 节约服务器资源
import HomeHeader from './components/Header.vue'
import SwiperLunbo from './components/SwiperLunbo.vue'
import TravelPlace from './components/Place.vue'
import HotList from './components/Hotlist.vue'
import YouLike from './components/YouLike.vue'
import RecomMend from './components/Recommend.vue'
export default {
  name: 'home',
  components: {/* 注册组件 */
    HomeHeader,
    SwiperLunbo,
    TravelPlace,
    HotList,
    YouLike,
    RecomMend
  },
  data () {
    return {
      swiperlist: [],
      placelist: [],
      hotlist: [],
      likelist: [],
      recommendlist: []
    }
  },
  methods: {
    homeinfo () {
      axios.get('localdata/index.json')
        .then((res) => {
          this.chenggong(res)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    chenggong (res) {
      let dataObj = res.data // json中的所以数据
      let dataList = dataObj.data // 保存到列表数据
      if (dataObj.ret && dataList) { // 如果后台处理成功 并且列表数据有值，才能相关的数据操作
        // console.log(dataList.swiperlist)
        this.swiperlist = dataList.swiperlist // 将axios获取到的数据，赋值给data中的数据
        this.placelist = dataList.placelist // 旅游地点
        this.hotlist = dataList.hotlist // 本周热门榜单精选
        this.likelist = dataList.likelist // 猜你喜欢数据
        this.recommendlist = dataList.recommendlist // 周末去哪儿数据
      }
    }
  },
  mounted () {
    this.homeinfo()
  }
}
</script>
<style lang="stylus" scoped="scoped">
  .bgcolor
    background-color #FFFFFF
</style>
